<template>

    <div class="product-name">
        <h2 :title="title" @click="$emit('changeShape')">
            <span v-text="title || 'Model preview'"></span>
            <svg-icon name="editor-shape" />
        </h2>
    </div>

</template>

<script>
export default {
    props: {
        title: { type: String, default: '' },
    },
    data () {
        return {
        }
    },

    methods: {

    }
};
</script>

<style lang="scss" scoped>
.product-name {
    width: 100%;
    height: 40px;
    min-height: 40px;
    position: relative;
    display: flex;
    justify-items: center;
    align-content: center;

    h2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        line-height: 28px;
        font-size: 16px;
        color: #000;
        display: flex;
        align-items: center;
        height: 28px;
        padding: 6px;
        max-width: 100%;
        cursor: pointer;

        span {
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
        }

        svg {
            width: 28px;
            min-width: 28px;
            height: 28px;
            margin-left: 4px;
            fill: #666;
            border: 1px solid #e0e0e0;
            box-sizing: border-box;
            border-radius: 6px;
        }

        &:hover {
            background-color: #f6f6f6;
            border-radius: 8px;
            color: #ea4c89;

            svg {
                border-color: #ea4c89;
                fill: #ea4c89;
            }
            span {
                color: #ea4c89;
            }
        }
    }
}
</style>
